<template>
	<view class="page">
		<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in course" :key="item.imgid">
				<view class="swiper-item">
					<image class="img" :src="item.img" mode="scaleToFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 标题和分享 -->
		<view class="title">
			<text class="name">{{info.title}}</text>
			<!-- #ifdef MP-WEIXIN -->
			<button class="share-btn" open-type	="share">
				<image class="share" src="../../../static/home_icon/share.png" mode="aspectFit"></image>
			</button>
			<!-- #endif -->
		</view>
		<!-- 价格 -->
		<view class="price">	
			<view class="price-detail">
				<view>
					<text class="discount">¥{{info.marketprice}}</text>
					<text class="oldPrice">¥{{info.price}}</text>
				</view>
				<view class="vip-discount">
					{{info.marke}}折
				</view>
			</view>
			<view class="price-info">
				<text>销量:{{info.sales}}</text>
				<text>库存:{{info.storage}}</text>
			</view>
		</view>
		<!-- tag -->
		<view class="tags">
			<view v-for="tag in info.tags" :key="tag.tagid"><uni-icon size="18" type="checkbox-filled" color="#FD6AB4"></uni-icon>{{tag.tagname}}</view>
		</view>
		<!-- tab选项卡 -->
		<!-- 商品详情啥的 -->
		<view class="info">
			<uni-segmented-control  :current="current"
															:values="items"
															@clickItem="onClickItem"
															activeColor="#FD6AB4"></uni-segmented-control>
			<view class="content">
				<view v-show="current === 0">
					<!-- 商品介绍 -->
					<view class="msg">
						<text class="msg-title">商品介绍</text>
						<view class="container">
							<view class="item" v-for="item in keys" :key="item.key">
								<text class="key">{{item.key}}</text>
								<text>{{item.value}}</text>
							</view>
						</view>
					</view>
					<!-- 评论列表 -->
					<view class="msg">
						<text class="msg-title">评论列表</text>
						<Comment v-for="item in comments" :key="item.geid" :msg="item"></Comment>
					</view>
				</view>
				<view v-show="current === 1">
					<image class="img" :src="img.img" lazy-load="true" mode="scaleToFill" v-for="img in msgImgs" :key="img.imgid"></image>
				</view>
			</view>
		</view>
		<!-- 底部加入购物车 -->
		<view class="bottom">
			<view class="icon" @click="openCart">
				<image src="../../../static/tabbar/cart_n.png" mode="aspectFill"></image>
			</view>
			<view class="addToCart" @click="showSku=!showSku">
				<text class="add">加入购物车</text>
			</view>
		</view>
		<!-- 商品的sku菜单 -->
		<sku v-model="showSku" :info="skuInfo"></sku>
		<!-- #ifdef APP-PLUS -->
		<app-share v-model="showShareMenu" @shareto = "share"></app-share>
		<!-- #endif -->
	</view>
</template>

<script>
	import { getGoodsInfo } from '../../../api/api.js'
	import uniSegmentedControl  from '../../../components/uni-segmented-control.vue'
	import uniIcon from '../../../components/uni-icon.vue'
	import Comment from '../../../components/Comment.vue'
	import Sku from '../../../components/Sku.vue'
	// #ifdef APP-PLUS
	import AppShare from '../../../components/AppShare.vue'
	// #endif
	export default {
		data() {
			return {
				id: '',
				info: {},
				course: [],
				msgImgs: [],
				items: [
					'商品参数',
					'图文详情'
				],
				current: 0,
				keys: [],
				comments: [],
				showSku: false,
				showShareMenu: false,
				skuInfo: {}
			};
		},
		onLoad(option) {
			this.id = option.id
		},
		onReady() {
			this.init()
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage (res) {
			// 小程序的分享
			return {
				title: this.info.share_title,
				path: `/pages/home/Goods/Goods?id=${this.info.goodsinfoid}`,
				imgUrl: this.info.share_img
			}
		},
		// #endif
		// #ifdef APP-PLUS
		// 监听导航栏的按钮点击
		onNavigationBarButtonTap (msg) {
			if (msg.type === 'share') {
				this.showShareMenu = true;
			}
		},
		// #endif
		methods:{
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index;
				}
			},
			init () {
				let query = {
					id: this.id,
					token: '888888',
					currPage: 1,
					pageSize: 10
				}
				getGoodsInfo(query).then(res=>{
					this.info = res
					this.course = res.hradimgs
					this.msgImgs = res.tailimgs
					this.keys = res.keys
					this.comments = res.evas.list
					this.skuInfo = this.formartSku(res)
				})
			},
			formartSku (msg) {
				let { title, goodsinfoid: id, haskey: sku, img, storage } = msg
				let info = {
					title, id, sku, img, storage
				}
				return info
			},
			openCart () {
				// 点击跳转到购物车界面
				uni.switchTab({
					url: '/pages/cart/Cart'
				})
			},
			// #ifdef APP-PLUS
			share (way) {
				switch (way){
					case 'wechat':
						uni.share({
							provider: 'weixin',
							scene: 'WXSceneSession',
							type: 0,
							href: `http://hzm.qiankaiwangluo.com/home/goods/${this.info.goodsinfoid}`,
							title: this.info.share_title,
							summary: this.info.share_subtitle,
							imageUrl: this.info.img,
							success(res) {
								console.log("success:" + JSON.stringify(res));
							}
						});
						break;
					case 'pyq':
						uni.share({
							provider: 'weixin',
							scene: 'WXSenceTimeline',
							type: 0,
							href: `http://hzm.qiankaiwangluo.com/home/goods/${this.info.goodsinfoid}`,
							title: this.info.share_title,
							summary: this.info.share_subtitle,
							imageUrl: this.info.img,
							success(res) {
								console.log("success:" + JSON.stringify(res));
							}
						});
						break;
					case 'qq':
						break;
					case 'sina':
						break;
					case 'more':
						break;
					default:
						break;
				}
			}
			// #endif
		},
		components:{
			uniSegmentedControl,
			uniIcon,
			Comment,
			Sku
			// #ifdef APP-PLUS
			,AppShare
			// #endif
		}
	}
</script>


<style lang="scss" scoped>
@import '~@/common/css/mixin.scss';
.page {
	padding-bottom: 98upx;
}
.swiper {
	height: 500upx;
	.swiper-item {
		height: 100%;
		.img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
}
.title {
	padding: 24upx;
	display: flex;
	background-color: #fff;
	border-bottom: 1px solid $L;
	.name {
		flex: 1;
		font-size: 34upx;
		line-height: 44upx;
		max-height: 88upx;
		overflow: hidden;
	}
	/* #ifdef MP-WEIXIN */
	.share-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		background-color: transparent;
		@include wh(44upx, 44upx);
		font-size: 0;
		line-height: 0;
		&::after{
			border: none;
		}
		.share {
			@include wh(44upx, 44upx);
		}
	}
	/* #endif */
}
.price {
	padding: 24upx 24upx 0 24upx;
	color: $M_PINK;
	font-size: 44upx;
	font-weight: 500;
	background-color: #fff;
	.price-detail {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.oldPrice {
			margin-left: 10upx;
			font-size: 24upx;
			color: $SUB_F;
			text-decoration: line-through;
		}
		.vip-discount {
			padding: 0 12upx;
			border-radius: 4upx;
			background-color: $M_PINK;
			color: #fff;
		}
	}
	.price-info {
		display: flex;
		justify-content: space-between;
		font-size: 24upx;
		line-height: 60upx;
		color: $SUB_F;
	}
}
.tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 24upx 12upx 24upx;
	background-color: #fff;
	font-size: 24upx;
	line-height: 60upx;
	color: $SUB_F;
}
// 底部结算
.bottom {
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 100;
	text-align: center;
	@include wh(100%, 98upx);
	.icon {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		@include wh(98upx, 98upx);
		image{
			@include wh(66upx, 66upx);
		}
	}
	.addToCart,  {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		background-color: $M_PINK;
		padding: 10upx 0;
		font-size: 24upx;
		color: #fff;
	}
}
.info {
	margin-top: 24upx;
	padding: 24upx;
	background-color: #fff;
	.content {
		padding-top: 24upx;
		// 商品介绍
		.msg {
			.msg-title {
				font-size: 30upx;
				line-height: 60upx;
				font-weight: bold;
			}
			.item {
				display: flex;
				justify-content: space-between;
				font-size: 26upx;
				.key {
					color: $SUB_F;
				}
			}
		}
		// 图片列表
		.img {
			width: 100%;
		}
	}
}
</style>
